<!-- 打包管理 打包任务管理 页面 -->
<template>
  <div class="container">
    <vxe-toolbar
      id="warehouseLocationId"
      :custom="{ storage: true }"
      export
      :refresh="{query: findList}"
    >
      <template v-slot:buttons>
        <div class="btnMargin">
          <el-button @click="findList">查询</el-button>
          <el-button :disabled='complete' @click="completeClick">打包完成</el-button>
          <el-button @click="printCliak">打印</el-button>
          <el-button @click="rewardsPunishmentClick">奖惩录入</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="640"
      align="center"
      export-config
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      sort-config.remote
      @sort-change="sortField"
      :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
      auto-resize
    >
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="status"
          title="状态"
          min-width="150"
          sortable
          :formatter="formatterStatus"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in auditStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="prepackagedCode" title="预打包单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.prepackagedCode" placeholder="预打包单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="code" title="打包任务号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.code" placeholder="打包任务号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="orderType" title="单据类型" :formatter="orderTypeStatus" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.orderType" placeholder="单据类型" clearable>
            <el-option
              v-for="item in packIssue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="jobType" title="作业类型" min-width="150" :formatter="jobTypeStatus" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.jobType" placeholder="作业类型" clearable>
            <el-option
              v-for="item in pasteIssue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="150" sortable />
        <template v-slot:header="{ column }">
           <el-select v-model="listQuery.warehouseCode" placeholder="请选择所属仓库 " style="width:100%" clearable>
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipmentName" title="入驻商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.shipmentCode" clearable filterable placeholder="请选择入驻商">
            <el-option
              v-for="item in options"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
      <vxe-table-column field="carrierName" title="承运商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.carrierName" clearable filterable placeholder="承运商">
            <el-option
              v-for="item in carrierList"
              :key="item.code"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="orderQuantity" title="订单数量" min-width="240" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.orderQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.orderQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="goodsQuantity" title="商品数量" min-width="240" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodsQuantityStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.goodsQuantityEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="billingMethod" title="计费方式" min-width="140" :formatter="billingMethodStatus" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.billingMethod" placeholder="请选择" clearable>
            <el-option
              v-for="item in charging"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="billingPrice" title="计费单价" min-width="240" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.billingPriceStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.billingPriceEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="staffName" title="作业人" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.staffName" placeholder="作业人" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="rewardAmount" title="奖励" min-width="240" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.rewardAmountStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.rewardAmountEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="punishAmount" title="惩罚" min-width="240" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.punishAmountStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.punishAmountEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="remarks"
          title="奖惩备注"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.remarks"
            placeholder="奖惩备注"
            clearable
          />
        </template>
      </vxe-table-column>
       <vxe-table-column>
        <vxe-table-column
          field="gmtFinish"
          show-header-overflow
          show-overflow
          title="完成时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtFinishRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtFinish')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="createdName"
          title="创建人"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.createdName"
            placeholder="创建人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtCreated"
          show-header-overflow
          show-overflow
          title="创建时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="modifiedName"
          title="修改人"
          min-width="250"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.modifiedName"
            placeholder="修改人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtModified"
          show-header-overflow
          show-overflow
          title="修改时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtModifiedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtModified')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="60">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <vxe-button
              type="text"
              @click="modelShowHide(scope.row.code, scope.row.orderType, scope.row.prepackagedCode)"
            >
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="modelPrintFlag" title="打印任务单" width="900" height="500" destroy-on-close resize>
      <comPrint :printData="printData" />
    </vxe-modal>
    <vxe-modal v-model="modelrewardsPunishFlag" title="奖惩录入" width="600" destroy-on-close resize>
      <rewardsPunish :rewardsList="rewardsList" @operationComplete="rewardsPunishmentClick();findList()" />
    </vxe-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import { packTaskList,receive } from '@/api/packManagement/prePackaged'
import { getWarehouse } from '@/api/basicInfo'
import { shipments, carrierDropdown } from "@/api/outStorage"; // 入驻商、承运商接口
import comPrint from './components/print.vue'
import rewardsPunish from './components/rewardsPunishment.vue'
export default {
  name: " 打包任务管理",
  components: { comPrint, rewardsPunish },
  props: {},
  data() {
    return {
      tableData: [],
      auditStatus: [
        { value: 'waiting', label: '待打包' },
        { value: 'completed', label: '打包完成' },
      ],
      // 状态
      packIssue: [
        { value: 'normal', label: '普通打包' },
        { value: 'prepackaged', label: '预打包' }
      ],
      pasteIssue: [
        { value: 'pack', label: '打包' },
        { value: 'paste', label: '贴单' },
        { value: 'pack_paste', label: '打包和贴单' },
      ],
      charging:[
        { value: 'days', label: '天' },
        { value: 'hours', label: '工时' },
        { value: 'pieces', label: '件' },
      ],
      orderData: [],
      records:[],
      printData:[],
      options:[],
      warehouseData:[],
      loading: false,
      complete: false,
      modelPrintFlag:false,
      modelrewardsPunishFlag: false,
      print:true,
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      gmtModifiedRange:"",
      gmtCreatedRange: '',
      gmtFinishRange: '',
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      rewardsList: [],
      carrierList: []
    };
  },
  watch: {},
  created() {
    this.findList();
    this.query()
  },
  computed: {

  },
  mounted() {},
  methods: {
    // 排序
    sortField({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
      } else {
        this.listQuery.sortField = "";
      }
      // this.findList();
    },
    query(){
      getWarehouse().then(response => {
        this.warehouseData = response.data
      })
      shipments().then(res => {
        this.options = res.data
      })
    },
    // 查询
    findList() {
      this.loading = true
      carrierDropdown().then(res => {
        this.carrierList = res.data
      })
      return packTaskList(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
        this.loading = false
      })
    },
    printCliak(){
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      if(selectRecords.length < 1){
        this.$message.error("请选择一条数据进行打印!");
        return
      }
      this.printData = selectRecords.map(v=>{
        return v.code
      })
      this.modelPrintFlag = true
    },
    completeClick(){
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      if(selectRecords.length < 1){
        this.$message.error("请选择一条数据进行打包完成!");
        return
      }
      this.$confirm('是否打包完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        receive(selectRecords).then(res=>{
          this.$message.success(res.msg)
          this.findList()
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消打包'
        // });
      });
    },
    // 使用报错 ↓ @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent"
    // selectAllEvent ({ checked, records }) {
    //   if(records.length !== 0){
    //     this.records = records
    //     this.complete=false
    //     this.print=false
    //   }else{
    //     this.records = []
    //     this.complete=true
    //     this.print=true
    //   }
    // },
    // selectChangeEvent ({ checked, records }) {
    //   if(records.length !== 0){
    //     this.records = records
    //     this.complete=false
    //     this.print=false
    //   }else{
    //     this.records = []
    //     this.complete=true
    //     this.print=true
    //   }
    // },
    // 时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.findList();
    },
    // 查看
    modelShowHide(code,type, prepackagedCode) {
      let show = ''
      if(prepackagedCode){
        show = 1
      }else{
        show = 0
      }
      this.$router.push({
        path: '/pack/packageDetail',
        query: { code: code, type: type, show: show }
      })
    },
    billingMethodStatus({cellValue}){
      if(!cellValue)return ''
      let obj = this.charging.find(v=>v.value === cellValue)
      return obj.label ||''
    },
    jobTypeStatus({cellValue}){
      if(!cellValue)return ''
      let obj = this.pasteIssue.find(v=>v.value === cellValue)
      return obj.label ||''
    },
    orderTypeStatus({cellValue}){
      if(cellValue === 'normal')return '普通打包'
      return '预打包'
    },
    // 翻译审核状态
    formatterStatus({cellValue}) {
      if(!cellValue)return ''
      let obj = this.auditStatus.find(v=>v.value === cellValue)
      return obj.label ||''
    },
    // 奖惩录入
    rewardsPunishmentClick() {
      this.rewardsList = []
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      if(selectRecords.length < 1){
        this.$message.warning("请选择一条数据进行奖惩录入!");
        return
      }
      selectRecords.forEach(item => {
        this.rewardsList.push(item.code)
      });
      this.modelrewardsPunishFlag = !this.modelrewardsPunishFlag
    }
  },
};
</script>
<style scoped>
.container {
  margin: 16px;
}
.inputWidth {
  width: 300px;
}
/* .mytable-footer{
  margin-top: 30px;
} */
/deep/ .vxe-table--render-default .vxe-cell {
  white-space: revert;
}
.btnMarginTop{
  margin-bottom: 10px;
}
/* .btnMargin{
  margin-bottom: 10px;
} */

</style>

